<template>
	<div id="userInfo">
		<h2 class="text-info">用户信息</h2>
		<form method="post" id="user_Info" @submit.prevent="submit_save">
			<table class="table">
				<tr>
					<td><label for="username_r">用户名:</label></td>
					<td><input type="text" id="username_r" :value="r.username" readonly="readonly" class="form-control" /></td>
				</tr>
				<tr>
					<td><label for="password_r">密码:</label></td>
					<td><input type="text" id="password_r" readonly="readonly" :value="r.password" class="form-control" /></td>
				</tr>
				<tr>
					<td><label for="name">昵称:</label></td>
					<td><input type="text" id="name" v-model="r.name" class="form-control" /></td>
				</tr>
				<tr>
					<td><label for="level">身份:</label></td>
					<td><input type="text" id="level" readonly="readonly" :value="levelInfo" class="form-control" /></td>
				</tr>
				<tr>
					<td><label for="question">安全问题:</label></td>
					<td><input type="text" id="question" readonly="readonly" :value="r.answer" class="form-control" /></td>
				</tr>
				<tr>
					<td><label for="mail">邮箱:</label></td>
					<td><input type="text" id="mail" v-model="r.mail" class="form-control" /></td>
				</tr>

				<input type="submit" value="保存" class="btn btn-info" />

			</table>

		</form>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				r: {
					username: '',
					password: '',
					name: '',
					answer: '',
					mail: '',
					id: '',
					level: '',
				},
				levelInfo: '',
				level:'',

			}
		},
		created() {
			this.r.id = this.$store.state.user[0].id;
			this.r.level = this.$store.state.user[0].level;
			this.level = this.r.level;
			this.getUserInfo();
		},
		watch: {
			'r.level': function(newVal) {
				if(newVal == 0) {
					this.levelInfo = "用户";
				}
				if(newVal == 1) {
					this.levelInfo = "版主";
				}
				if(newVal == 2) {
					this.levelInfo = "管理员";
				}
			}
		},
		methods: {
			getUserInfo() {
				this.$http.get('/api/userInfo', {
					params: {
						id: this.r.id
					}
				}).then(data => {
					if(data.status == 200) {
						this.r = data.body[0];
					}
				}, err => {
					console.log(err)

				})

			},
			submit_save() {
				console.log(this.r);
				this.$http.post('/api/userInfoSave', this.r, {}).then(data => {
					if(data.status == 200) {
						alert("保存成功");
						this.getUserInfo();
					}
				}, err => {
					console.log(err);

				})
			}
		}
	}
</script>

<style scoped lang="less">
	#userInfo {
		width: 350px;
		margin: 0 auto;
		#user_Info {
			margin-top: 20px;
		}
	}
</style>